import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import MyLineEchart from '@/components/my-echart/my-line-echart';
import MyPieChart from '@/components/my-echart/my-pie-chart';
import MyBarEchart from '@/components/my-echart/my-bar-echart';
import MyAddressEchart from '@/components/my-echart/my-address-echart';
import {
  changeFavorAction,
  changeCategorySaleAction,
  changeAddressSaleAction,
  changeCategoryCountAction,
} from './store/actionCreators';

import './style.less';
/* 商品统计界面 */
export default memo(function Dashboard() {
  /* 执行redux更改数据 获取数据传入图表组件 */
  const dispatch = useDispatch();
  const { favor } = useSelector((state) => ({
    favor: state.getIn(['dashboard', 'favor']),
  }));
  const { categorySale } = useSelector((state) => ({
    categorySale: state.getIn(['dashboard', 'categorySale']),
  }));
  const { addressSale } = useSelector((state) => ({
    addressSale: state.getIn(['dashboard', 'addressSale']),
  }));
  const { categoryCount } = useSelector((state) => ({
    categoryCount: state.getIn(['dashboard', 'categoryCount']),
  }));
  useEffect(() => {
    dispatch(changeFavorAction());
    dispatch(changeCategorySaleAction());
    dispatch(changeAddressSaleAction());
    dispatch(changeCategoryCountAction());
  }, [dispatch]);

  return (
    <div className="dashboard">
      <div className="title">
        <p>分类商品数量(玫瑰图)</p>
        <p>商品销量销量统计</p>
        <p>分类商品数量(线图)</p>
      </div>
      <div className="echart-list">
        <MyPieChart dataList={categoryCount} />
        <MyAddressEchart dataList={addressSale} />
        <MyLineEchart dataList={categoryCount} />
      </div>
      <div className="title">
        <p>分类商品的销量</p>
        <p>分类商品的收藏</p>
      </div>
      <div className="echart-list">
        <MyLineEchart dataList={categorySale} />
        <MyBarEchart dataList={favor} />
      </div>
    </div>
  );
});
